<template>
  <div>
    <div id="top">
    <div class="lt">
        <van-icon name="arrow-left" @click="tui()"/>
    </div>
    <div class="h3">休闲娱乐</div>
    <div class="input">
        <van-icon name="search" />
        <router-link to="/xiyuindexsousuo">搜索</router-link>
    </div>
    </div>
    <nav>
      <div id="nav">
          <!-- <div class="navp" v-for="(v,i) in navtext" :key="i">
              <p>
                  <img :src=v.imgsrc>
                  <span>{{v.title}}</span>
              </p>
          </div> -->
          <router-link to="/erxiyu">
              <van-icon name="wap-home" />
              洗浴/汗蒸
          </router-link>
          <router-link to="/eranmo">
            <van-icon name="map-marked" />
            按摩/足疗
          </router-link>
          <router-link to="/erktv">
            <van-icon name="music" />
            KTV
          </router-link>
          <router-link to="/ermishi">
            <van-icon name="shop" />
            密室/沉浸
          </router-link>
          <router-link to="/erjiuba">
            <van-icon name="gift" />
            酒吧
          </router-link>
          
          
      </div>
    </nav>

    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(v,i) in swiperarr" :key="i">
              <img :src="v.img">
          </van-swipe-item>
      </van-swipe>
    </div>


    <div id="menu">
      <div class="menup">
        <p v-for="(v,i) in menutext" :key="i+'x'">
          <span>{{v.title}}</span>
          <van-icon name="arrow-down" />
        </p>
      </div>
    </div>

    <router-view> </router-view>
  </div>


  

</template>

<script>
import axios from 'axios'
// import {swiperLink} from '@/api/zhangyifan.js'
export default {
    components:{
    },
    data(){
        return{
            navtext:[
                {imgsrc:"zhangyifan/imgs/index3.gif",title:"洗浴/汗蒸"},
                {imgsrc:"zhangyifan/imgs/index3.gif",title:"按摩/足疗"},
                {imgsrc:"zhangyifan/imgs/index4.gif",title:"KTV"},
                {imgsrc:"zhangyifan/imgs/index5.gif",title:"密室/沉浸"},
                {imgsrc:"zhangyifan/imgs/index1.gif",title:"酒吧"},
                {imgsrc:"zhangyifan/imgs/index2.gif",title:"更多"},
            ],
            swiperarr:[],
            menutext:[
                {title:"全城"},
                {title:"排序"},
                {title:"筛选"},
                {title:"高档型"},
                {title:"洗浴中心"},
                {title:"浴室澡堂"},
                {title:"汗蒸馆"},
            ]
        }
    },
    mounted(){
        // swiperLink().then((ok)=>{
        //     console.log(ok.data);
        //     this.swiperarr=ok.data
        // })
        axios.get("http://localhost:8889/zswiper").then((ok)=>{
            this.swiperarr=ok.data
            console.log(ok.data);
        })
    },

    methods:{
      tui(){
        this.$router.go(-1)
      }
    }
}
</script>

<style scoped lang='scss'>
  #top{
        height: 12.267vw;
        width: 100%;
        // background-color: gainsboro;
        display: flex;
        line-height: 12.267vw;
        padding: 0 2.667vw;
        overflow: hidden;
        box-sizing: border-box;
        align-items: center;
        text-align: center;

        .lt{
            width: 19.467vw;
            text-align: left;
        }

        .h3{
            width: 21.333vw;
            font-weight: 700;
            flex-grow:1 ;
            
        }
        .input{
            width: 19.467vw;
            height:7.2vw ;
            background-color: white;
            color: gray;
            border-radius:4vw;
            line-height: 7.2vw ;
            font-size: 3.733vw;
            box-shadow: 0.533vw 0.533vw 1.333vw  gainsboro;
        }
        a{
            color: gray;
        }
    }
   nav{
        width: 100%;
        height: 12.8vw;
        overflow-x: auto;
        font-size: 3.733vw;
        #nav{
          display: flex;
          width: 133.333vw;
          height: 100%;
          align-items: center;
            a{
                display: block;
                width:24vw;
                flex-shrink: 0;
                // background-color: orange;
                border-radius: 4vw;
                margin: 0 1.333vw;
                text-align: center;
                height: 8vw;
                line-height:8vw;
                color: black;
                font-weight: 700;
            }
       }

      .router-link-exact-active{
          background-color: #fdeae3;
          color: #f47d39 !important
        }

    }::-webkit-scrollbar {
        display:none;
      }
    .my-swipe .van-swipe-item {
      text-align: center;
    }
    #menu{
    height: 10.133vw;
    width: 100%;
    overflow-x: auto;
    border-bottom: 0.267vw solid #f6f6f6;
      p{
        font-size: 3.2vw;
        width: 17.067vw;
        height: 6.133vw;
        background-color: #f6f6f6;
        border-radius: 4vw;
        text-align: center;
        line-height: 6.133vw;
        margin-right: 1.333vw;
      }
        .menup{
          width: 133.333vw;
          height: 100%;
          display: flex;
          align-items: center;
        }
      
  }::-webkit-scrollbar {
        display:none;
      }
  
    
</style>